<template>
  <a-layout>
      <a-layout-header :style="headerStyle">
       <a-button type="text">WebGL轻量化+BIM融合引擎</a-button>
        <a-space>
        <a-select
          ref="select"
          v-model:value="value1"
          style="width: 120px"
          @focus="focus"
          @change="handleChange"
        >
          <a-select-option value="jack">中文</a-select-option>
          <a-select-option value="lucy">英文</a-select-option> 
        </a-select>
         <a-button @click="handlePage">登录</a-button>
        </a-space>
    
       
      </a-layout-header>
      <a-layout-content :style="contentStyle">
        <div class="content paddleft10">
       <div>   <a-space>
          <a-button type="primary" :size="size" class="bac">
              <template #icon>
                <PlusOutlined /> 
              </template>
              创建项目
            </a-button>
              <a-button type="primary" :size="size"  class="bac">
              <template #icon>
                <SyncOutlined /> 
              </template>
              刷新状态
            </a-button> 
         </a-space></div>
       <div>    <a-input-search
      v-model:value="value"
      placeholder="请输入搜索内容"
      enter-button="搜索"
      size="large"
      @search="onSearch"
    /></div>
        </div>

         <div class="content content2 paddleft10">
        
        <a-space>
          <a-button type="primary" disabled :size="size"  >
              
              全部
            </a-button>
              <a-button disabled type="primary" :size="size"  >
               
              民用建筑
            </a-button> 
              <a-button disabled type="primary" :size="size"  >          
              基础设施
            </a-button> 
            <a-button disabled type="primary" :size="size"  >          
              工业设施及设备
            </a-button> 
            <a-button disabled type="primary" :size="size"  >          
              倾斜摄影
            </a-button> 
             <a-button disabled type="primary" :size="size"  >          
              激光点云
            </a-button> 
            <a-button disabled type="primary" :size="size" >          
              CAD图纸
            </a-button> 
         </a-space> 
        </div>
        <div class="content1">
         <a-row :gutter="[10, 16]" style="width: 100%;padding-left:10px">
            <a-col class="gutter-row" @click="handleBJQ" :span="6" v-for="item in 8" :key="item">
              <div class="gutter-box">
              <div class="gutter-box-img">
                <img src="https://img1.baidu.com/it/u=4200457080,799481537&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313"/>
                <div class="pos">3D模型设计</div>
              </div>

              <div class="centers">
                  <h3>WebGL模型设计</h3>
                  <div class="bottoms">
                  <div>2024-6-2</div>
                  <div>by k*****k</div>
                  <div></div>
                  </div>
              </div>
              </div>
            </a-col> 
          </a-row>
        </div>
       
      </a-layout-content>
  </a-layout>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import { PlusOutlined, SyncOutlined  } from '@ant-design/icons-vue';
	import { useRouter } from 'vue-router';

	const router = useRouter();
  const value1 =ref('jack')
  const value =ref('')
  const handlePage=()=>{
    console.log('99999')
		router.push('/Logins');

  }
    const handleBJQ=()=>{
    console.log('99999')
		router.push('/Home');

  }
   
const headerStyle: CSSProperties = { 
  color: '#fff',
  height: 64,
  paddingInline: 50,
  lineHeight: '64px',
   background: 'rgba(230, 248, 250, 1)',
      display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
};

const contentStyle: CSSProperties = { 
  height: 'calc(100vh - 64px)',
  color: '#fff',
  background:'#fff'

};  
</script>

<style lang="scss" scoped> 
.content{
  height:70px;
  width:94%;
  margin:0 auto;
  background:#fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between
}
.gutter-row{
  cursor: pointer;
}
.paddleft10{
  padding-left:10px;
}
.content1{
  width:94%;
  margin:0 auto;
  background:#fff;
  padding-bottom:10px;
}
.content2{
   height:50px;
}
.bac{
 background: rgba(0, 174, 198, 1);
}
::v-deep(.ant-input-search-button){
 background: rgba(0, 174, 198, 1);

}
.gutter-box { 
  height:250px;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
}
.gutter-box-img{
  height:180px;
  width:100%;
  position:relative;
  img{
    width:100%;
    height:100%
  }
  .pos{
    position:absolute;
    bottom:30px;
    left:0px;
    width:120px;
    height:30px;
    line-height:30px;
    padding-left:20px;
    background:#333
  }
}
.centers{ 
  width:100%;
  color:#333;
  padding-top:10px;
  padding-left:15px;
}
.bottoms{
  width:100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between
}
</style>
